<template>
    <div class="add-app">
        <form class="add-form">
            <div class="form-item">
                <div class="label">应用名称</div>
                <input v-model="addFormData.name" type="text" maxlength="6" placeholder="不可超过6个字符" @keyup="checkIsCanSubmit" />
            </div>
            <div class="form-item">
                <div class="label">应用图标</div>
                <input v-model="addFormData.icon" type="text" placeholder="必须是合法的url地址" @keyup="checkIsCanSubmit" />
            </div>
            <div class="form-item">
                <div class="label">应用链接</div>
                <input v-model="addFormData.url" type="text" placeholder="必须是合法的url地址" @keyup="checkIsCanSubmit" />
            </div>
            <div class="form-buttons">
                <button type="button" :disabled="!isCanSubmit" @click="submitForm"><i class="iconfont icon-duigoux"></i>确认</button>
                <button id="reset-button" type="button" @click="resetForm"><i class="iconfont icon-cha"></i>清空</button>
            </div>
        </form>
        <div v-show="successMessage" class="success-message" v-text="successMessage"></div>
        <div v-show="errorMessage" class="error-message" v-text="errorMessage"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue';
import { useShortcutStore } from '@/store/shortcut';

// 创建store对象
const shortcutStore = useShortcutStore();

const data = reactive({
    // 表单数据
    addFormData: {
        name: '',
        icon: '',
        url: '',
    },
    // 空表单
    emptyAddFormData: {
        name: '',
        icon: '',
        url: '',
    },
    // 是否可以提交
    isCanSubmit: false,
    // 成功信息和错误信息
    successMessage: '',
    errorMessage: '',
});

const { addFormData, isCanSubmit, successMessage, errorMessage } = toRefs(data);

// 检查是否可以提交
const checkIsCanSubmit = () => {
    data.isCanSubmit = checkName() && checkIcon() && checkUrl();
};

// 正则
const urlReg = /^(https?|ftp|file):\/\/[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|]$/;

// 检查应用名称
const checkName = () => {
    const name = data.addFormData.name;
    if (name.length < 1 || name.length > 6) {
        return false;
    }
    if (shortcutStore.shortcutArray.findIndex((shortcut) => shortcut.name === data.addFormData.name) < 0) {
        data.errorMessage = '';
        return true;
    } else {
        data.successMessage = '';
        data.errorMessage = '应用名称重复';
        return false;
    }
};

// 检查应用图标
const checkIcon = () => {
    const icon = data.addFormData.icon;
    return urlReg.test(icon);
};

// 检查应用链接
const checkUrl = () => {
    const url = data.addFormData.url;
    return urlReg.test(url);
};

// 提交表单
const submitForm = () => {
    shortcutStore.push({
        id: new Date().getTime() + '',
        ...data.addFormData,
    });
    data.successMessage = '应用添加成功';
    setTimeout(() => {
        data.successMessage = '';
    }, 3000);
    resetForm();
};

// 清空表单
const resetForm = () => {
    data.addFormData = {
        ...data.emptyAddFormData,
    };
    data.isCanSubmit = false;
};
</script>

<style scoped lang="less">
.add-app {
    padding: 30px;
    overflow: hidden;
    position: relative;

    .add-form {
        .form-item {
            margin-bottom: 20px;
            .label {
                font-size: @dps-font-size-base;
                font-weight: bolder;
                margin-bottom: 5px;
            }

            input {
                font-size: @dps-font-size-base;
                height: 20px;
                width: 100%;
                padding: 5px;
            }
        }

        .form-buttons {
            font-size: @dps-font-size-lg;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 50px;
            width: 100%;
            background-color: @dps-color-light-gray-50;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            button {
                height: 40px;
                width: 80px;
                line-height: 40px;
                font-size: @dps-font-size-lg;

                i {
                    margin-right: 5px;
                }
            }
        }
    }

    .success-message {
        font-size: @dps-font-size-base;
        color: @dps-color-green;
    }

    .error-message {
        font-size: @dps-font-size-base;
        color: @dps-color-red;
    }
}
</style>
